<template>
  <div class="view-fill">
    <div v-if="!modifyInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        @returnBack="returnBack"
        title="自定义表格明细"
      >
        <template v-slot:full-button>
          <el-button v-if="infoList.data.tableSetType === 1" @click="update"
            >修改</el-button
          >
        </template>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <BasicInformation
              :info="infoList"
              :labelWidth="infoList.labelWidth"
            >
            </BasicInformation>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <!-- 表格 -->
            <PageTable
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :pager="false"
              :check-box="false"
              :tab-index="true"
              :field-list="tableInfo.fieldList"
              :isDynamic="true"
            >
            </PageTable>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      :id="modifyInfo.id"
      @returnBack="getMain"
    />
  </div>
</template>

<script setup name="customizeDetails">
import {
  getCustomizeById,
  getCustomizeSysSettingList,
} from '@/api/customize.js'
const Modify = defineAsyncComponent(() => import('./modify'))

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: () => {
      return 0
    },
  },
})
const infoList = ref({
  data: {},
  fieldList: [
    { label: '名称', value: 'name', type: 'text' },
    { label: '表格-key', value: 'tableKey', type: 'text' },
    {
      label: 'view对象',
      value: 'viewName',
      type: 'text',
      style: { width: '25%' },
    },
    { label: '排序方式', value: 'sortTypeValue', type: 'text' },
    { label: '备注', value: 'remark', type: 'text' },
  ],
  labelWidth: '100px',
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    storeId: props.id,
    sort: 'product_id,validity_date',
  },
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    {
      label: '字段名',
      value: 'fieldName',
    },
    {
      label: '字段名(数据库)',
      value: 'columnName',
    },
    {
      label: '列名',
      value: 'label',
    },
    {
      label: '是否返回',
      value: 'isBackValue',
    },
    {
      label: '是否展示',
      value: 'showLevel',
    },
    {
      label: '分组查询',
      value: 'groupLevel',
    },
    {
      label: '排序控制',
      value: 'sortControllerTypeValue',
    },
    {
      label: '排序顺序',
      value: 'sortLevel',
    },
    {
      label: '查询控制',
      value: 'searchLevel',
    },
    {
      label: '匹配类型',
      value: 'queryType',
    },
    {
      label: '后端合并',
      value: 'sysGroupLevel',
    },
    {
      label: '是否聚合',
      value: 'functionTypeValue',
    },
    {
      label: '表格单元格宽度',
      value: 'formWidth',
    },
    {
      label: '下载Excel单元格宽度',
      value: 'excelWidth',
    },
    {
      label: '打印表格单元格宽度',
      value: 'printWidth',
    },
  ],
})
const modifyInfo = ref({
  title: '',
  visible: false,
  id: '',
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})
function returnBack() {
  emits('returnBack', false)
}
function getMain() {
  getCustomizeById(props.id).then((res) => {
    if (res && res.success) {
      infoList.value.data = res.data
      getList()
    }
  })
}
function update() {
  modifyInfo.value.id = props.id
  modifyInfo.value.title = '修改自定义表格'
  modifyInfo.value.visible = true
}
function getList() {
  let _tableInfo = tableInfo.value
  let param = { customizeSettingId: props.id }
  getCustomizeSysSettingList(param).then((res) => {
    if (res && res.success) {
      _tableInfo.data = res.data
    }
  })
}

onMounted(() => {
  proxy.$nextTick(() => {
    getMain()
  })
})
</script>

<style scoped></style>
